<template>
  <div
    class="back-dia1"
    :style="{ top: diamessage.top + 'px', left: diamessage.left + 'px' }"
  >
    <div class="dia1-line1">今日客流量</div>
    <div class="dia1-line2">{{ diamessage.date }}</div>
    <div class="dia1-line3">{{ diamessage.rateFlow }}人</div>
  </div>
</template>

<script>
export default {
  props: {
    diamessage: {
      type: Object,
      default: () => {
        return {
          facilityName: "暂无数据",
          id: 1,
          top: 52,
          left: 26,
          date: "2022/06/01",
          number: 11300
        };
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    diamessage: {
      handler(newvalue) {
        this.diamessage = newvalue
      },
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";
.back-dia1 {
  width: 127px;
  height: 92px;
  // background-color: aqua;
  position: absolute;
  z-index: 8;
  background-image: url('../../assets/templeone/backimgone/kuang1.png');
  background-repeat: no-repeat;
  background-size: 127px 92px;
  .dia1-line1{
    margin-top: 10px;
    width: 127px;
    text-align: center;
    color: #01FDCE;
    font-size: 11pt;
  }
  .dia1-line2{
    width: 127px;
    text-align: center;
    color: $textColor;
    font-size: 9pt;
  }
  .dia1-line3{
    margin-top: 8px;
    width: 127px;
    text-align: center;
    color: #01FDCE;
     font-size: 9pt;
  }
}
</style>
